import {designPage, useStyleCache} from "@peryl/react-compose";
import {useCmsEditorOption} from "../module/cms-visual-editor";
import {CmsEditor, PlainCmsNamespace} from "../../packages";
import {ClientZoom} from "plain-design";
import {RouteSelector} from "../components/RouteSelector";
import {AppRouter} from "../AppRouter";

export default designPage(() => {

  const option = useCmsEditorOption({
    isRunning: false,
    titleRightContent: () => <RouteSelector/>,
  });

  console.log({ option }, option.state.getStateData());

  import('./cms-bind-value.data.json').then(resp => {
    const data: PlainCmsNamespace.iDataMeta[] = resp.default as any;
    const rootDataMeta = data.find(i => !i.parentId);
    if (!rootDataMeta) {return;}
    if (!rootDataMeta.binding) {rootDataMeta.binding = {};}
    rootDataMeta.binding.pageParam = {
      code: 'pageParam',
      from: 'self',
      seq: -1,
      name: '页面路由',
      version: 1,
      bindingSource: {
        code: 'custom',
        data: (() => {
          const path = AppRouter.state.route.path;
          return path.charAt(0) == '/' ? path.slice(1) : path;
        })(),
        entityCode: { sec: 'string' }
      }
    };
    option.methods.updateData(data);
  });

  const styles = useStyleCache(style => {
    style.minHeight = `calc(100vh / ${ClientZoom.get()})`;
  });

  return () => (
    <CmsEditor option={option} style={styles.value}/>
  );
});
